<script lang="ts" setup>
import { ref } from "vue"
import gmDialog from "@/components/Dialog/index.vue"
import { cloneDeep } from "lodash-es"
import { saveOrUpdateCustomDepartment } from "@/api/custom"
import { type FormInstance, type FormRules } from "element-plus"
import useForm from "@/hooks/useForm"
import AreaSelect from '@/components/AreaSelect/index.vue'

interface Props {
  data?: any
}

const props = withDefaults(defineProps<Props>(), {
  data: () => ({}),
})

const form = ref<any>(cloneDeep(props.data) || {})
const formRef = ref<FormInstance>()
const dialogRef = ref<InstanceType<typeof gmDialog>>()
const emit = defineEmits(["cancel", "success"])

const rules: FormRules = {
  name: [{required: true, message: "请输入客户名称", trigger: "change"}],
  // contactName: [{required: true, message: "请输入客户姓名", trigger: "change"}],
  mobile: [{required: true, message: "请输入联系方式", trigger: "change"}]
}

const changeArea = (e)=> {
  form.value.province = e.province.name
  // form.value.provinceCode = e.province.code
  form.value.city = e.city.name
  // form.value.cityCode = e.city.code
  form.value.area = e.street.name
  // form.value.areaCode = e.street.code
}

const { handleSubmit } = useForm({ formType: "dialog", emit: emit })

const cancel = () => {
  emit("cancel")
}

const success = () => {
  handleSubmit(saveOrUpdateCustomDepartment, formRef.value, form.value, dialogRef.value)
}
</script>

<template>
  <gm-dialog ref="dialogRef" title="新增/编辑客户系列" @cancel="cancel" @comfirm="success">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" label-position="left">
      <el-form-item prop="name" label="客户名称">
        <el-input v-model="form.name" placeholder="请输入" />
      </el-form-item>
      <el-form-item prop="contactName" label="联系人姓名">
        <el-input v-model="form.contactName" placeholder="请输入" />
      </el-form-item>
      <el-form-item prop="mobile" label="联系方式">
        <el-input v-model="form.mobile" placeholder="请输入" />
      </el-form-item>
      <el-form-item prop="taxId" label="税号">
        <el-input v-model="form.taxId" placeholder="请输入税号" />
      </el-form-item>
      <el-form-item prop="openBank" label="开户银行">
        <el-input v-model="form.openBank" placeholder="请输入开户银行" />
      </el-form-item>
      <el-form-item prop="bankAccount" label="银行账号">
        <el-input v-model="form.bankAccount" placeholder="请输入银行账号" />
      </el-form-item>
      <el-form-item  prop="cityCode" label="省市区">
        <AreaSelect width="100%" v-model="form.allAreaCode" :modelValue="form.allAreaCode" @change="changeArea"/>
      </el-form-item>
      <el-form-item prop="address" label="注册地址">
        <el-input v-model="form.address" placeholder="请输入注册地址" />
      </el-form-item>
      <el-form-item prop="community" label="楼盘">
        <el-input v-model="form.community" placeholder="请输入楼盘" />
      </el-form-item>
    </el-form>
  </gm-dialog>
</template>

<style lang="scss" scoped>
</style>
